<template>
  <div>
    <div class="gui-padding bgf">
      <div class="mb15">
        <a-breadcrumb>
          <a-breadcrumb-item>系统日志</a-breadcrumb-item>
          <a-breadcrumb-item>操作日志</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="mb10 flex align-items justify-content-between">
        <a-form layout="inline"
                autocomplete="off">
          <a-form-item label="关键词">
            <a-input v-model:value="queryParams.keyword" size="small" @change="handleSearch" style="width: 360px" placeholder="请输入用户信息，方法，类名，国家、省、市" allow-clear/>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click.prevent="handleSearch" size="small">
              <SearchOutlined/>
              搜索
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-table :columns="columns"
               rowClassName="items"
               :loading="false"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 268px)' }"
               :pagination="false"
               :data-source="tableData"
               size="middle" sticky bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'userId'">
            <div class="flex">
              <span>用户ID：{{record.userId}}</span>
              <span class="ml5">用户名：{{record.username}}</span>
              <span class="ml5">账号：{{record.account}}</span>
            </div>
          </template>
          <template v-if="column.dataIndex === 'country'">
             <div class="flex  ">
               <span>国家：{{record.country}}</span>
               <span class="ml5">省份：{{record.province}}</span>
               <span class="ml5">城市：{{record.city}}</span>
               <span class="ml5">网络：{{record.network}}</span>
               <span class="ml5">经纬度：{{record.latitude}} / {{record.longitude}}</span>
             </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span>
              <a-popconfirm title="你确定删除吗?" @confirm="handleDelete(record.id)">
               <a-button type="primary" size="small" danger> <template #icon><CloseOutlined
                   style="font-size:12px"/></template>删除</a-button>
              </a-popconfirm>
            </span>
            </div>
          </template>
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            show-size-changer
            :total="total"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const tableData = ref([]);
const total = ref(0)
const pages = ref(0)
const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
const queryParams = reactive({
  "pageNo": 1,
  "pageSize": 20,
  "status": null,
  "keyword": null
})

// 获取选择的行id
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})



// 定义表格的列信息
const columns = [
  {
    title: '序号',
    fixed: "left",
    align:"center",
    width: 60,
    dataIndex: 'index',
    customRender: ({text, record, index}) =>  index + 1
  },
  {
    title: '操作用户ID',
    dataIndex: 'userId',
    align:"center",
    width: '360px',
  },
  {
    title: '操作描述',
    dataIndex: 'description',
    align:"center",
    width: '200px',
  },
  {
    title: '执行方法',
    dataIndex: 'method',
    align:"center",
    width: '200px',
  },
  {
    title: '请求路径',
    dataIndex: 'address',
    align:"center",
    width: '400px',
  },
  {
    title: '方法参数',
    dataIndex: 'params',
    align:"center",
    width: '800px',
  },
  {
    title: '方法耗时(毫秒)',
    dataIndex: 'time',
    align:"center",
    width: '120px',
    customRender: ({text, record, index}) =>  text + "ms"
  },
  {
    title: '执行类',
    dataIndex: 'className',
    align:"center",
    width: 320,
  },
  {
    title: 'IP',
    dataIndex: 'requestIp',
    align:"center",
    width: '240px',
  },
  {
    title: '浏览器',
    dataIndex: 'browser',
    align:"center",
    width: '240px',
  },
  {
    title: '浏览器版本',
    dataIndex: 'browserVersion',
    align:"center",
    width: '240px',
  },
  {
    title: '操作系统',
    dataIndex: 'os',
    align:"center",
    width: '240px',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align:"center",
    width: '240px',
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    align:"center",
    width: '240px',
  },
  {
    title: '地域信息',
    dataIndex: 'country',
    align:"center",
    width: '600px',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: "right",
    width: '200px',
  },
];

// 查询表格信息
const handleLoadData = async ()=>{
  const res= await useFindSysLogApi(queryParams)
  tableData.value = res.data.records
  total.value = res.data.total
  pages.value = res.data.pages
}

// 搜索
const handleSearch = ()=>{
  queryParams.pageNo = 1;
  handleLoadData()
}

// 改变分页
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}



const handleDelete = async(id) => {
  const res= await useDeleteShops(id)
  useMessage().success("删除成功!");
  handleLoadData()
}

const handleChangeUpdate = async(record,field)=>{
  var params = {
    id:record.id,
    field:field,
    value:record[field]
  }
  await useUpdateStatusShopsCategory(params)
  useMessage().success("操作成功!")
}

onMounted(()=>{
  handleLoadData()
})
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>
